<script>
import {getPokeSkillList} from "@/axios/request/index.js";

export default {
  data() {
    return {
      pokeSkillListPage: {},
      pokeSkillListQO: {
        name: "",
        attributeList: [],
        classification: "",
        pageNum: 1,
        pageSize: 10,
      },
      attributeStrInput: "",
      attributeStrShow: "",
      showAttributeInput: false,
    }
  },
  methods: {
    getPokeSkillList() {
      getPokeSkillList(this.pokeSkillListQO).then((result) => {
        this.pokeSkillListPage = result
      })
    },
    pageChange(pageNum, pageSize) {
      this.pokeSkillListQO.pageNum = pageNum = undefined ? 1 : pageNum
      this.pokeSkillListQO.pageSize = pageSize = undefined ? 10 : pageSize
      this.getPokeSkillList()
    },
    openAttributeInput() {
      this.showAttributeInput = true
      this.$nextTick(() => {
        document.getElementById("attributeInput").focus()
      })
    },
    closeAttributeInput() {
      this.showAttributeInput = false
      this.pokeSkillListQO.attributeList = this.attributeStrInput.split("，")
      this.attributeStrShow = this.attributeStrInput
    },
  }
}
</script>

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right title">
      <el-breadcrumb-item :to="{ path: '/' }" style="font-size:15px;">首页</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size:15px;">poke</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size:15px;">招式列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="query-button">
    <el-row justify="space-evenly">
      <el-col :span="6">
        名称：
        <el-input v-model="this.pokeSkillListQO.name" style="width: 200px" placeholder="请输入poke名称"></el-input>
      </el-col>
      <el-col :span="6" style="position: relative;">
        属性：
        <el-input v-model="this.attributeStrShow" style="width: 200px" placeholder="请输入属性"
                  @focus="this.openAttributeInput()"></el-input>
        <div v-show="this.showAttributeInput" style="position: absolute;left: 63px;top: 40px;z-index: 4;">
          &#12288&#12288&#12288
          <el-input id="attributeInput" v-model="this.attributeStrInput" type="textarea" resize="none"
                    style="width: 200px" placeholder="多个逗号隔开" @blur="this.closeAttributeInput()"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        分类：
        <el-input v-model="this.pokeSkillListQO.classification" style="width: 200px"
                  placeholder="请输入分类"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button @click="this.getPokeSkillList()">查询</el-button>
      </el-col>
    </el-row>
  </div>
  <div class="table-div">
    <el-scrollbar>
      <el-table :data="this.pokeSkillListPage.list" border height="650">
        <el-table-column label="poke名称" prop="name"></el-table-column>
        <el-table-column label="属性">
          <template #default="scope">
            <el-tag>{{ scope.row.attribute }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="分类">
          <template #default="scope">
            <el-tag>{{ scope.row.classification }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
  <div class="page-div">
    <el-pagination background size="small" layout="prev, pager, next"
                   :total="this.pokeSkillListPage.total"
                   v-model:page-size="this.pokeSkillListQO.pageSize"
                   v-model:current-page="this.pokeSkillListQO.pageNum"
                   @change="this.pageChange(this.pokeSkillListQO.pageNum, this.pokeSkillListQO.pageSize)"></el-pagination>
  </div>
</template>

<style scoped>
.query-button {
  margin-top: 5px;
  text-align: center;
  background-color: #f6f5f5;
  padding: 5px;
}

.table-div {
  margin-top: 5px;
}

.page-div {
  margin-top: 5px;
}
</style>